<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" th:href="@{/resources/imgs/icon.svg}" />
    <meta name="description" content="你懂的">
    <meta name="author" content="urok">
    <link rel="stylesheet" th:href="@{/resources/layui/css/layui.css}" media="all" />
    <script th:src="@{/resources/js/jquery.js}"></script>
    <title>主页</title>
    <style>
        html,body{
            height: 100%;
            width: 100%;
            padding: 0px;
            margin:0px;
        }

        body{
            background-color: rgba(100,100,10,0.3);
        }

        iframe{
            width: 100%;
            height: 100%;
            overflow: hidden;
            border: none;
        }
    </style>
</head>
<body>

    <div id="defaultContext" class="wrapper-page" style="margin-top: 16%">
        <div class="m-t-30">
            <div class="text-center">
                <h1 id="tipMsg" style="text-align: center;color:red;font-size: 130px;"></h1>
            </div>
        </div>
    </div>

    <div id="notServer" class="wrapper-page" style="margin-top: 16%;display: none;">
        <div class="m-t-30">
            <div class="text-center">
                <h1 style="text-align: center;color:red;font-size: 50px;">当前无可用的服务，请稍后再试</h1>
                <div style="margin-top: 50px;text-align: center;">
                    <div style="width: 30%;display: inline-block;">
                        <button id="retryButton" type="button" class="layui-btn layui-btn-fluid layui-btn-normal">
                            <span class="countDownTime showTime"></span>
                            <span class="countDownTime">秒后</span>
                            点击重试
                        </button>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <iframe id="myContext" src=""></iframe>

</body>
<script th:src="@{/resources/layui/layui.all.js}"></script>
<script th:inline="javascript">

    //向服务器发送的消息对象
    var mess = {
        code:null, //1: 请求获取ue4服务地址,2: 发送鼠标和键盘的操作次数，3：发送断开连接请求,4、拒绝断开连接
        wsSessionId: null  //ws服务的会话id,当code=1时需要传的参数
    }
    //全局socket
    var communic_socket = null;
    //拒绝断开连接默认等待时间（多久没有点击取消断开按钮，将自动断开连接）
    var defaultWaitTime = 10;  //10/s
    //开启socket事件
    connectionServer();
    //layui加载组件（加载中，组件对象）
    var onloadIndex = null;


    /**
     * websocket事件处理
     */
    function connectionServer(){

        var serverIp = [[${serverIp}]];
        var serverPort = [[${serverPort}]];

        console.log("服务器信息："+serverIp+":"+serverPort);

        communic_socket = new WebSocket("ws://"+serverIp+":"+serverPort+"/main_connection");

        //打开事件
        communic_socket.onopen = function() {
            console.log("连接打开");
            //发送连接请求
            mess.code=1;
            communic_socket.send(JSON.stringify(mess));
        };
        //接收消息
        communic_socket.onmessage = function(msg) {
            //console.log(msg);
            messageHandler(msg.data);

        };
        //关闭事件
        communic_socket.onclose = function() {
            console.log("Socket 已关闭");
        };
        //发生了错误事件
        communic_socket.onerror = function() {
            showErrorMsg("服务端连接异常，请刷新重试");
            console.log("服务端连接异常，错误代码：" + communic_socket.readyState);
        }
    }


    /**
     * 消息处理器
     * @param data
     */
    function messageHandler(data) {
        try{
            var result = JSON.parse(data);
            console.log(result);
            switch (result.code){
                case 603:
                    layer.close(onloadIndex);
                    mess.wsSessionId=result.data.wsSessionId;
                    $("#myContext").attr("src",result.data.url+"?wsSessionId="+result.data.wsSessionId);
                    $("#myContext").css('display','block');
                    $("#defaultContext").css('display','none');
                    $("#notServer").css('display','none');
                    window.wsSessionId = result.data.wsSessionId;
                    break;
                case 602:
                    //弹出提示框，询问用户是否断开连接
                    confirmUnConnection();break;
                case 500:
                    showErrorMsg(result.msg);
                    break;
                case 604:
                    //显示加载中动画
                    $("#myContext").css('display','none');
                    onloadIndex = layer.load(3, {content:'加载中',});
                    break;
                case 605:
                    //没有可用的服务
                    noServicesAvailable();break;
                default:
                    alert("异常");
            }

        }catch (err){
            console.log(err);
        }
    }

    /**
     * 没有可用服务时展示错误信息和重试按钮
     */
    function noServicesAvailable(){
        layer.close(onloadIndex);
        $("#tipMsg").css('display','block');
        $("#myContext").css('display','none');
        $("#defaultContext").css('display','none');
        $("#notServer").css('display','block');
    }


    /**
     * 弹框提示用户是否要主动断开连接给其他用户使用
     */
    function confirmUnConnection(){
        let dshiqIndex = null;  //定时器对象
        let msgIndex = layer.confirm('当前服务繁忙，是否同意断开连接？（'+defaultWaitTime+'秒后将自动断开)', {
            btn: ['同意', '不同意，我想继续使用下去'], //可以无限个按钮
            cancel: function(){
                //右上角关闭回调
                //取消定时器
                clearTimeout(dshiqIndex);
                //给服务器发送拒绝断开连接的请求
                mess.code=4;
                communic_socket.send(JSON.stringify(mess));
            }
        }, function(index, layero){
            //按钮【按钮一】的回调
            layer.close(index);
            //取消定时器
            clearTimeout(dshiqIndex);
            signOut();
            return;
        }, function(index){
            //按钮【按钮二】的回调
            //取消定时器
            clearTimeout(dshiqIndex);
            //给服务器发送拒绝断开连接的请求
            mess.code=4;
            communic_socket.send(JSON.stringify(mess));
        });

        //用户没有点击取消，十秒后自动将断开连接
        dshiqIndex = setTimeout(function (){
            layer.close(msgIndex);
            console.log("用户没有任何操作，五秒后自动退出");
            signOut();
        },defaultWaitTime*1000);
    }


    /**
     * 断开连接
     */
    function signOut(){
        //一：断开与ue4的websocket连接
        mess.code=3;
        communic_socket.send(JSON.stringify(mess));
        //改变页面
        $("#myContext").attr("src","home.html");
        communic_socket.close();
        console.log("断开连接成功");
    }


    /**
     * 在当前页面显示错误信息
     */
    function showErrorMsg(msg){
        $("#tipMsg").css('display','block');
        $("#tipMsg").text(msg);
        $("#myContext").css('display','none');
        $("#notServer").css('display','none');
    }



    ///////////////////////////////////////////////////////////////////////////////
    /**
     *  倒计时部分控制代码
     * @type {number}
     */
    var defaultCountDownTime = 30; //倒计时长度：默认30秒
    var countDownTime = defaultCountDownTime;
    countDown();
    //倒计时
    function countDown(){
        //按钮禁用
        $("#retryButton").attr("disabled","true");
        $("#retryButton").addClass("layui-btn-disabled");

        $(".showTime").text(countDownTime);
        var index = setInterval(()=>{
            if(countDownTime>0){
                $(".showTime").text(--countDownTime);
            }else{
                $("#retryButton").removeClass("layui-btn-disabled");
                $(".countDownTime").css("display","none");
                countDownTime=defaultCountDownTime;
                $("#retryButton").removeAttr("disabled");
                clearInterval(index);
                return ;
            }
        },1000);
    }
    $("#retryButton").click(function (){
        location.reload();
    });
    ///////////////////////////////////////////////////////////////////////////////



</script>

</html>